<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    class="approval-flow-update-dialog"
    title="提示"
    width="700px"
    destroy-on-close
  >
    <template slot="title"
      >校企汇通CRM系统升级公告</template
    >
    <div class="noticeTitle">
      {{ details.noticeTitle }}
    </div>
    <div class="noticeContent" v-html="details.noticeContent"></div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sureClick">我知道啦</el-button>
    </span>
    <img
      src="../../../../../assets/img/crm/noticeDialog.png"
      alt=""
      class="back-img"
    />
  </el-dialog>
</template>

<script>
export default {
  // 审批流升级说明弹窗
  name: "NoticeFlowUpdateDialog",

  components: {},

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    details: {
      type: Object,
      default: () => {
        return {
          noticeTitle: "",
          noticeContent: ""
        };
      }
    }
  },

  data() {
    return {};
  },

  beforeDestroy() {},

  methods: {
    sureClick() {
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style lang="scss">
.approval-flow-update-dialog {
  .el-dialog {
    // background-image: url("../../../../../assets/img/crm/noticeDialog.png");
    // background-repeat: no-repeat;
    // background-position-x: 90%;
    // background-position-y: 5%;
    background: linear-gradient(0deg, #ffffff, #ddf0ff);
  }
  .el-dialog__header {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    padding: 24px;
  }

  .el-dialog__body {
    padding: 0 24px 0 24px;
    font-size: 14px;
    line-height: 1.5;
    .noticeTitle {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
    }
    .noticeContent {
      height: 230px;
      padding: 10px 10px 10px 0;
      overflow-y: auto;
    }
  }

  .el-dialog__footer {
    background: #f7f8fa;
    padding: 0 16px;
    height: 48px;
    width: 100%;
    .dialog-footer {
      display: block;
      width: 100%;
      text-align: right;
    }
  }

  .back-img {
    position: absolute;
    top: 13px;
    right: 49px;
  }
}
</style>
